<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例_登录</title>
    <!-- 引入bootstrap.css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
    <!-- 公共 -->
    <style>
        html,
        body {
            background-color: #EDF0F5;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            width: 520px;
            height: 540px;
            background-color: #fff;
            padding: 60px;
            box-sizing: border-box;
        }

        .container h3 {
            font-weight: 900;
        }
    </style>
    <!-- 表单容器和内容 -->
    <style>
        .form_wrap {
            color: #8B929D !important;
        }

        .form-text {
            color: #8B929D !important;
        }
    </style>
    <!-- 提示框样式 -->
    <style>
        .alert {
            transition: .5s;
            opacity: 0;
        }

        .alert.show {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="container">
        <h3>欢迎-登录</h3>
        <!-- 登录结果-提示框 -->
        <div class="alert alert-success my-alert" role="alert">
            提示消息
        </div>
        <!-- 表单 -->
        <div class="form_wrap">
            <form>
                <div class="mb-3">
                    <label for="username" class="form-label">账号名</label>
                    <input type="text" class="form-control username">
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" class="form-control password">
                </div>
                <button type="button" class="btn btn-primary btn-login"> 登 录 </button>
            </form>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 1.找对象：用户名+密码+登陆按钮
        const uname = document.querySelector('.username')
        const pwd = document.querySelector('.password')
        const btn = document.querySelector('.btn-login')

        //     2.给按钮注册事件
        btn.addEventListener('click', function () {
            // console.log(111) 打印按钮是否能正常获取

            // 3.获取表单数据
            const username = uname.value.trim()  // .trim()用于移除字符串两端的空白字符（包括空格、制表符、换行符等）
            const password = pwd.value.trim()
            console.log(username, password)

            // 4.表单校验 ->如果校验没通过，也要提示
            if (username.length < 8) return myAlert('用户名最少是8位')  // 当if里只有一行代码，可以简写=> 去掉花括号
            if (password.length < 6) return myAlert('密码最少是6位')

            // 5.校验通过发送请求
            axios({
                url: 'https://hmajax.itheima.net/api/login',
                method: 'post',
                data: {
                    username,
                    password
                }
            }).then(res => {
                console.log(res)
                myAlert(res.data.message)
                // 6.接收返回的数据
                // 7.根据结果进行提示
            }).catch(err => {
                myAlert(err.response.data.message)
            })

        })

        // 封装函数
        function myAlert(txt) {
            // 找对象
            const el = document.querySelector('.my-alert')

            // 给当前的提示内容设置给el
            el.innerHTML = txt

            // 让他出现
            el.classList.add('show')

            // 过一会让它消失
            setTimeout(function () {
                el.classList.remove('show')
            }, 1000)
        }

    </script>
</body>

</html>